<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Widget palette basic tests</title>

	<!-- CUSTOMIZATION: Make sure "../" URLs for href/src attributes are correct -->
	<link rel="stylesheet" type="text/css" href="../css/testplan.css" />
</head>

<body>
	<div class="navbar">
		<a href="./" title="show directory contents"><code>./</code> (show contents of this directory)</a>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="../" title="show directory contents"><code>../</code> (show contents of parent directory)</a>
	</div>
	<hr />
	<h1 class="test_title">Widget palette basic tests</h1>

	<h2 class="test_section">Overview</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Standard setup things: Clear the browser cache. Launch the Maqetta server. 
				Login if necessary. 
				In some cases, you'll want to setup a virgin user environment by creating a whole new user login.</li>
		<li>For each of the composition types (mobile app, desktop app, sketch hifi, sketch lofi), create a new HTML file.</li>
		<li>Once the new file is created, the Widget palette is populated.</li>
		<li>At the top of the Widget palette is a text input field for searching the widget library.</li>
		<li>Widgets are organized into sections and subsections. The sections and subsections differ on the composition type.
			For mobile apps, you should see:
			<ul>
			<li>Views</li>
			<li>Heading</li>
			<li>Lists</li>
			<li>Controls (with subsections Buttons; Checkboxes, RadioButtons, Switch; IconContainer; Pickers; Select, Sliders, Spinners; TextBox; Toolbars, ButtonBars; Other)</li>
			<li>Containers (with subsections IBM One UI [internal only], Dojo and HTML)</li>
			<li>HTML (with subsections Common; Forms; Headers; Images, Media, Iframes; Paragraphs, Breaks, Rules; Tables)</li>
			<li>Clip Art (with subsections Arrows; Community; Device Silhouettes; Media; User Interface Controls; User Interface Icons; Other)</li>
			<li>Drawing Tools</li>
			<li>Other</li>
			</ul>
			For desktop apps, you should see:
			<ul>
			<li>Containers (same subsections as mobile)</li>
			<li>Controls (same subsections as mobile, except no IconContainer or Pickers)</li>
			<li>HTML (with subsections Common; Forms; Headers; Images, Media, Iframes; Paragraphs, Breaks, Rules; Tables)</li>
			<li>Clip Art (same subsections as mobile)</li>
			<li>Drawing Tools</li>
			<li>Other</li>
			</ul>
			For both sketch types, you should see:
			<ul>
			<li>Drawing Tools</li>
			<li>Clip Art (same subsections as mobile)</li>
			<li>Controls (same subsections as mobile)</li>
			<li>Containers (same subsections as mobile)</li>
			<li>HTML (with subsections Common; Forms; Headers; Images, Media, Iframes; Paragraphs, Breaks, Rules; Tables)</li>
			<li>Other</li>
			</ul>
		</li>
		<li>Click on each widget folder (and subfolder) and observe that the folder opens to display a list of widgets.
			Make sure that any other open folders (or subfolders) close when you open a different folder (or subfolder).</li>
		<li>Go to Controls/Buttons and click on the Button widget in the widget palette to select it.
			You should see a gray selection rectangle for the Button, with a top right caret icon
			and a bottom left question mark icon.</li>
		<li>Click on the caret icon and you should see a popup
			that shows alternate button widgets (e.g., Dijit and HTML). Click again on caret icon to close the popup.
			Click on the caret icon again and then click on the small "x" icon at top right corner of popup
			to close the popup.</li>
		<li>Click on the ? icon to open the help text. The popup
			should show both a Summary and Description for the Dojo Button widget.
			Click again on the ? icon to close the help popup. Click on the ? again to re-open the help popup.
			Click on the small "x" icon at top right of the help popup to close the poup.
			</li>
		<li>Click once again on the caret icon for the Button widget. Click on the "HTML" button"
			in that popup. The popup should close. Drag the Button widget from widget palette
			to the canvas. You should see an HTML &lt;button&gt; widget on the canvas.
			Click once again on the caret icon for the Button widget. Click on the "Dijit" button"
			in that popup. The popup should close. Drag the Button widget from widget palette
			to the canvas. You should see an Dojo/Dijit Button widget on the canvas.
			</li>
		<li>With a widget folder open, observe that each widget is highlighted as you hover over it with the mouse.</li>
		<li>Select a widget and drag it onto the editor canvas.</li>
		<li>Click on a widget to select it, and then click on the canvas. <span style="color:red">This should also add the widget to the canvas.</span></li>
		<li>Click on the "X" close button to close the html file (without saving).</li>
		<li>Observe that the Widget palette is now empty.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>When no files are open in the Page editor, the Widget palette is empty.</li>
		<li>When a file is open in the Page editor, the Widget palette is populated.</li>
	</ol>

	<h2 class="test_section">Controls</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Choose Create Desktop Application from Create menu</li>
		<li>Open the Controls folder (and each of the subfolders) in the Widget palette.</li>
		<li>Drag each widget listed in this section onto the canvas.
			Some of the widgets will allow you to enter data for the widget
			via a popup text entry control.</li>
		<li>If smart input is displayed for the widget enter text that includes HTML for example <i>test &lt;b&gt;smart&lt;/b&gt;input</i></li>
		<li>Select the plan text radio button</li>
		<li>Click ok button</li>
		<li>Validate that the displayed content is correct, in this case <i>test &lt;b&gt;smart&lt;/b&gt;input</i> </li>
		<li>Preview the file by clicking on the preview icon, validate that the displayed content is correct. Close the preview </li>
		<li>Click on the "X" close button to close the html file</li>
		<li>Reopen the file, validate that the content is correct in the designer, in this example <i>test &lt;b&gt;smart&lt;/b&gt;input</i></li>
		<li>Double click on the widget to display smart input, click the <b>HTML radio button</b> then click ok button</li>
		<li>Validate that the displayed content is correct in this example <i>test <b>smart</b>input</i></li>
		<li>Preview the file by clicking the Preview icon</li>
		<li>Verify the displayed content is correct, close the preview.
		<li>Click on the "X" close button to close the html file</li>
		<li>Reopen the file, validate that the content is correct in the designer, in this example <i>test <b>smart</b>input</i></li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>You should be able to drag each widget from the Widget palette onto the editor canvas.</li>
		<li>As the widget is being dragged, the mouse pointer turns into a + sign and the widget's name.</li>
		<li>When the widget is dropped onto the canvas, the widget is displayed on the canvas.</li>
	</ol>

	<h2 class="test_section">Containers</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Choose Create Desktop Application from Create menu</li>
		<li>Open the Dojo Containers folder in the Widget palette.</li>
		<li>Drag each widget listed in this section onto the canvas.
			Some of the widgets will allow you to enter data for the widget
			via a popup text entry control.</li>
		<li>If smart input is displayed for the widget enter text that includes HTML for example <i>test &lt;b&gt;smart&lt;/b&gt;input</i></li>
		<li>Select the plan text radio button</li>
		<li>Click ok button</li>
		<li>Validate that the displayed content is correct, in this case <i>test &lt;b&gt;smart&lt;/b&gt;input</i> </li>
		<li>Preview the file by clicking on the preview icon, validate that the displayed content is correct. Close the preview </li>
		<li>Click on the "X" close button to close the html file</li>
		<li>Reopen the file, validate that the content is correct in the designer, in this example <i>test &lt;b&gt;smart&lt;/b&gt;input</i></li>
		<li>Double click on the widget to display smart input, click the <b>HTML radio button</b> then click ok button</li>
		<li>Validate that the displayed content is correct in this example <i>test <b>smart</b>input</i></li>
		<li>Preview the file by clicking the Preview icon</li>
		<li>Verify the displayed content is correct, close the preview.
		<li>Click on the "X" close button to close the html file</li>
		<li>Reopen the file, validate that the content is correct in the designer, in this example <i>test <b>smart</b>input</i></li>

	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>You should be able to drag each widget from the Widget palette onto the editor canvas.</li>
		<li>As the widget is being dragged, the mouse pointer turns into a + sign and the widget's name.</li>
		<li>When the widget is dropped onto the canvas, the widget is displayed on the canvas.</li>
	</ol>

	<h2 class="test_section">HTML</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Choose Create Desktop Application from Create menu</li>
		<li>Open the HTML folder in the Widget palette.</li>
		<li>Drag each widget listed in this section onto the canvas.
			Some of the widgets will allow you to enter data for the widget
			via a popup text entry control.</li>
		<li>If smart input is displayed for the widget enter text that includes HTML for example <i>test &lt;b&gt;smart&lt;/b&gt;input</i></li>
		<li>Select the plan text radio button</li>
		<li>Click ok button</li>
		<li>Validate that the displayed content is correct, in this case <i>test &lt;b&gt;smart&lt;/b&gt;input</i> </li>
		<li>Preview the file by clicking on the preview icon, validate that the displayed content is correct. Close the preview </li>
		<li>Click on the "X" close button to close the html file</li>
		<li>Reopen the file, validate that the content is correct in the designer, in this example <i>test &lt;b&gt;smart&lt;/b&gt;input</i></li>
		<li>Double click on the widget to display smart input, click the <b>HTML radio button</b> then click ok button</li>
		<li>Validate that the displayed content is correct in this example <i>test <b>smart</b>input</i></li>
		<li>Preview the file by clicking the Preview icon</li>
		<li>Verify the displayed content is correct, close the preview.
		<li>Click on the "X" close button to close the html file</li>
		<li>Reopen the file, validate that the content is correct in the designer, in this example <i>test <b>smart</b>input</i></li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>You should be able to drag each widget from the Widget palette onto the editor canvas.</li>
		<li>As the widget is being dragged, the mouse pointer turns into a + sign and the widget's name.</li>
		<li>When the widget is dropped onto the canvas, the widget is displayed on the canvas.</li>
	</ol>

<!-- 
	<h2 class="test_section">Untested Dojo/HTML</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
	<li>Choose Create Desktop Application from Create menu</li>
		<li>Open the Dojo Containers folder in the Widget palette.</li>
		<li>Drag each widget listed in this section onto the canvas.
			Some of the widgets will allow you to enter data for the widget
			via a popup text entry control.</li>
		<li>If smart input is displayed for the widget enter text that includes HTML for example <i>test &lt;b&gt;smart&lt;/b&gt;input</i></li>
		<li>Select the plan text radio button</li>
		<li>Click ok button</li>
		<li>Validate that the displayed content is correct, in this case <i>test &lt;b&gt;smart&lt;/b&gt;input</i> </li>
		<li>Preview the file by clicking on the preview icon, validate that the displayed content is correct. Close the preview </li>
		<li>Click on the "X" close button to close the html file</li>
		<li>Reopen the file, validate that the content is correct in the designer, in this example <i>test &lt;b&gt;smart&lt;/b&gt;input</i></li>
		<li>Double click on the widget to display smart input, click the <b>HTML radio button</b> then click ok button</li>
		<li>Validate that the displayed content is correct in this example <i>test <b>smart</b>input</i></li>
		<li>Preview the file by clicking the Preview icon</li>
		<li>Verify the displayed content is correct, close the preview.
		<li>Click on the "X" close button to close the html file</li>
		<li>Reopen the file, validate that the content is correct in the designer, in this example <i>test <b>smart<</b>input</i></li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>You should be able to drag each widget from the Widget palette onto the editor canvas.</li>
		<li>As the widget is being dragged, the mouse pointer turns into a + sign and the widget's name.</li>
		<li>When the widget is dropped onto the canvas, the widget is displayed on the canvas.</li>
	</ol>
-->

	<h2 class="test_section">Using the widget filter</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Choose Create Desktop Application from Create menu</li>
		<li>In the Widget palette, click on the "Filter..." input field.</li>
		<li>Type in some text to search for a widget (e.g. "button").</li>
		<li>Select one of the widgets displayed and drag it into the canvas.</li>
		<li>Click on the small "x" icon on the right side of the input field to clear the filter field and display the complete list of widgets.</li>
		<li>Click on the "X" close button to close the html file (without saving).</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>The small "x" in the filter field should only appear when the filter text field has at least one characters.</li>
		<li>When you enter text in the Filter input field, any widgets that contain the text will be displayed. All other widgets will be filtered out.</li>
	</ol>

	<h2 class="test_section">Show suggested vs show all</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Open at least one file of each composition type: mobile app, desktop app, sketch hi-fi, sketch lo-fi</li>
		<li>Open up the menu at the top/right of the widget palette. You should see two menu items, 
			"Suggested widgets" and "All widgets", and by default "Suggested widgets" should be checked.</li>
		<li>For each of the four composition types, in the Widget palette, open up Controls/Buttons section.
			Click on "Button" to select it. Click on the caret icon on top/right to show the list of alternative widgets.
			<ul>
				<li>For mobile app, you should see Dojo Mobile and HTML, but not Dijit.</li>
				<li>For desktop app, you should see Dijit and HTML, but not Dojo Mobile.</li>
				<li>For the two sketch modes, you should see Dijit, Dojo Mobile and HTML.</li>
			</ul>
		</li>
		<li>Choose the "All widgets" option from the menu. After selecting it, look at the menu again.
			The "All widgets" option should be checked now.</li>
		<li>For each of the four composition types, in the Widget palette, open up Controls/Buttons section.
			Click on "Button" to select it. Click on the caret icon on top/right to show the list of alternative widgets.
			<ul>
				<li>For mobile app, you should see Dojo Mobile, Dijit and HTML in that order.</li>
				<li>For desktop app, you should see Dijit, Dojo Mobile and HTML in that order.</li>
				<li>For the two sketch modes, you should see Dijit, Dojo Mobile and HTML.</li>
			</ul>
		</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>As described above.</li>
	</ol>

</body>
</html>
